/**
 * Created by YJH on 2018/6/4.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Linking,
} from 'react-native';
import {MORE_MENU} from './MoreMenu';
import AboutCommon, {FLAG_ABOUT_COMMON} from './AboutCommon';
import GlobalStyles from '../../../res/styles/GlobalStyles';
import NavigationBarUtil from '../../util/NavigationBarUtil';
import config from '../../../res/data/config.json';
import {FLAG} from './FlagRespository';

export default class AboutMePage extends Component<Props> {
    constructor(props) {
        super(props);
        this.aboutCommon = new AboutCommon(props,
            (dic) => this.updateDic(dic),
            FLAG_ABOUT_COMMON.flag_about_me,
            config);
        this.state = {
            projectModules: [],
            showRepository: false,
            showBlog: false,
            showQQ: false,
            showContact: false,
            theme:this.props.theme,
        };
    }

    componentDidMount() {
        this.aboutCommon.componentDidMount();
    }


    updateDic(dic) {
        if (!dic)return;
        this.setState(dic);
    }

    onItemClick(tab) {

    }

    onItemMoreClick(itemName) {
        switch (itemName){
            case FLAG.REPOSITORY:
                this.updateDic({
                    showRepository: !this.state.showRepository,
                });

                break;

            case FLAG.BLOG.name:
                this.updateDic({
                    showBlog: !this.state.showBlog,
                });
                break;

            case FLAG.CONTACT.name:
                this.updateDic({
                    showContact: !this.state.showContact,
                });
                break;

            case FLAG.QQ.name:
                this.updateDic({
                    showQQ: !this.state.showQQ,
                });
                break;
        }
    }


    /**
     * 功能：显示列表数据
     * @param dic
     * @param isShowAccount
     */
    renderItem(dic, isShowAccount) {
        if (!dic)return;
        let views = [];
        for (let i in dic) {
            let title = isShowAccount ? dic[i].title + ":" + dic[i].account : dic[i].title;
            views.push(<View key={i}>
                {NavigationBarUtil.getSettingItem(
                    require('../../../res/images/ic_view_quilt.png'),
                    title,
                    {tintColor: 'white'},
                    null,
                    () => this.onItemClick(title))}
                <View style={GlobalStyles.line}/>
            </View>)
        }
        return views;
    }

    /**
     * 功能：获取右侧图标
     * */
    getClickIcon(isShow) {
        return isShow ? require('../../../res/images/ic_tiaozhuan_up.png') : require('../../../res/images/ic_tiaozhuan_down.png');
    }

    render() {

        let parallConfig = {
            renderForeground: 'https://img.mukewang.com/545866b700013ce302200220-140-140.jpg',
            renderBackground: 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3777a2b161224f4a4899751339f69044/b3b7d0a20cf431ad4e6397ae4736acaf2fdd98f0.jpg',
            userName: '中泰民安',
            userProfile: '受到全球关注的中美经贸磋商上周末进行了又一回合,宣布将对中国500亿美元高科技商品加征关税。',
        };

        let itemContentView = <View>

            {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_view_quilt.png'),
                FLAG.BLOG.name, this.state.theme.styles.tabBarSelectedIcon, this.getClickIcon(this.state.showBlog), () => this.onItemMoreClick(FLAG.BLOG.name))}
            {this.renderItem(this.state.showBlog ? FLAG.BLOG.items : null)}
            <View style={GlobalStyles.line}/>

            {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_insert_emoticon.png'),
                FLAG.CONTACT.name, this.state.theme.styles.tabBarSelectedIcon, this.getClickIcon(this.state.showContact), () => this.onItemMoreClick(FLAG.CONTACT.name))}
            {this.renderItem(this.state.showContact ? FLAG.CONTACT.items : null)}
            <View style={GlobalStyles.line}/>

            {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_feedback.png'),
                FLAG.QQ.name, this.state.theme.styles.tabBarSelectedIcon, this.getClickIcon(this.state.showQQ), () => this.onItemMoreClick(FLAG.QQ.name))}
            {this.renderItem(this.state.showQQ ? FLAG.QQ.items : null)}
            <View style={GlobalStyles.line}/>

            {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_feedback.png'),
                FLAG.REPOSITORY, this.state.theme.styles.tabBarSelectedIcon, this.getClickIcon(this.state.showRepository), () => this.onItemMoreClick(FLAG.REPOSITORY))}
            {this.state.showRepository ? this.aboutCommon.renderRepository(this.state.projectModules) : null}
            <View style={GlobalStyles.line}/>
        </View>;


        return this.aboutCommon.render(parallConfig, itemContentView);
    }
}

// const styles = StyleSheet.create({
//     item_cell: {
//         padding: 10,
//         backgroundColor: '#ffffff',
//         borderWidth: 3,
//         borderColor: '#F0F0F0',
//         borderRadius: 5,
//         elevation: 2,
//
//     },
//     item_avatar: {
//         flexDirection: 'row',
//         alignItems: 'center',
//     },
//     item_star: {
//         flexDirection: 'row',
//         justifyContent: 'flex-end',
//         alignItems: 'center',
//     },
//     item_star_num: {
//         color: 'gray',
//         marginLeft: 10,
//         marginRight: 10,
//         fontSize: 14,
//     },
//     item_owner: {
//         color: 'black',
//         marginLeft: 10,
//         marginRight: 10,
//         fontSize: 16,
//     },
//     item_des: {
//         color: 'gray',
//         marginLeft: 50,
//         fontSize: 14,
//         flexWrap: 'nowrap',
//     },
// });
